<template>
    <div class="cardCommp" :style="commpStyle">
        <el-card :shadow="card.shadow" v-for="(card, index) in cardDatas" :key="'card_'+index">
            <div slot="header" v-if="card.title" class="header">
                <span>{{ card.title }}</span>
            </div>
            <layoutContainer :layout="card.layout"></layoutContainer>
        </el-card>
    </div>
</template>
<script>
import BaseComp from "./baseComp";
import layoutContainer from "./layoutContainer.vue";
export default {
    name: "cardCommp",
    extends: BaseComp,
    components: {layoutContainer},
    model: {
        prop: 'cardValue',
        event: 'cardChange'
    },
    props: {
        cardData: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    watch: {
        cardData: {
            handler(val) {
                if(val.layout){
                    //将卡片配置数据转换为渲染数据
                    this.cardDatas = val.layout.map(item => {
                        return {
                            title: item.title,
                            shadow: item.shadow,
                            layout: {
                                row: 1,
                                col: 1,
                                render: [
                                    {rowNum: 1,colNum: 1,width: '100%',component: item.component, config: item.config}
                                ]
                            }
                        }
                    })
                }
            },
            deep: true,
            immediate:true
        }
    },
    data(){
        return{
            //卡片配置数据内容对象
            cardDatas: []
        }
    },
    created() {

    },
    mounted(){
        let themeFileName = this.$options.name;
        this.loadTheme(themeFileName);
    },
    methods: {

    }
}
</script>
<style scoped lang="less">

</style>
